<template>
	<div class="pattern-box">
		<canvas class="canvas-box" ref="canvasBox" id="canvasBox" width="750" height="1334"></canvas>
		<img ref="base64Img" @click="base64ImgClick" v-if="dataUrl" class="dataUrl" :src="dataUrl" />
	</div>
</template>

<script>
	require('jr-qrcode');
	export default {
		props: {
			postImg: String,
			txBase: String,
			correct: Number,
		},
		data() {
			return {
				ERcode: this.$lockr.get("ERcode"), 
			    liveTheme: window.sessionStorage.getItem("RoomTopic"), //主题
				//liveTheme: '中山北二路与江浦路路口南侧路路口南侧1111', //主题
				liveTime: localStorage.getItem("ruanTime"), //预告时间
				dataUrl: '',
			}
		},
		watch: {
			isBuildImg(val, oldVal) {
			},
			txBase(v, oldVal) {
				if(v != '') {
				}
			}
		},
		computed: {
			isBuildImg() {
				if(this.txBase != '' && this.postImg != '') {
					this.startCanvas()
					return true
				} else {
					return false
				}
			},
			nickname() {
				return this.$store.state.userInfo.nickname||this.$store.state.userInfo.un
			}
		},
		created() {
		},
		mounted: function() {
			//console.log(document.body.clientWidth)//375
		},
		methods: {
			base64ImgClick() {
				this.$emit("msgParent", {
					type: "closeSlide",
					data: 'ruan'
				});
			},
			startCanvas() {
				let c = this.$refs.canvasBox;
				let ctx = c.getContext("2d");
				const posterBg = new Image();
				posterBg.src = require('../../assets/images/invitation/bg' + Number(this.correct + 1) + '.png');
				posterBg.onload = () => {
					ctx.drawImage(posterBg, 0, 0, 750, 1334);
					const TXImg = new Image();
					TXImg.src = this.txBase;
					TXImg.onload = () => {
						switch(this.correct) {
							case 0:
								ctx.drawImage(TXImg, 90, 206, 87, 87); //起始   +大小	
								ctx.fillStyle = "#FFFFFF";
								ctx.font = "38px Arial";
								ctx.textAlign="start";
								if(this.$channel == 'zxyh') {
									ctx.fillText('中信银行的朋友', 220, 240);
								} else {
									ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 220, 240); //昵称
								}
								//绘制主题
								ctx.fillStyle = "#FFFFFF";
								ctx.font = "normal small-caps bold 35px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; //以定位参考线居中 就是下面的 373的位置
								if(this.liveTheme.length>17){
								   ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 423);
								}else{
								   ctx.fillText(this.liveTheme, 373, 423);
								}

								//绘制时间
								ctx.fillStyle = "#FFFFFF";
								ctx.font = "25px Microsoft Yahei";
								ctx.textAlign = "center"; 
								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 1:
								ctx.drawImage(TXImg, 101, 215, 87, 87); //起始   +大小
								//绘制昵称
								ctx.fillStyle = "#2D2D2D";
								ctx.font = "38px Arial";
								ctx.textAlign="start";
								if(this.$channel == 'zxyh') {
									ctx.fillText('中信银行的朋友', 230, 247);
								} else {
									ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 230, 247);
								}
								//绘制主题
								ctx.fillStyle = "#533D20";
								ctx.font = "normal small-caps bold 35px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; 
								if(this.liveTheme.length>15){
                                   ctx.fillText(this.liveTheme.slice(0,15)+'...', 373, 423);
                                }else{
                                   ctx.fillText(this.liveTheme, 373, 423);
                                }

								//绘制时间
								ctx.fillStyle = "#5A462B";
								ctx.font = "25px Microsoft Yahei";
								ctx.textAlign = "center"; 
								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 2:
							case 3:
							case 6:
								ctx.drawImage(TXImg, 101, 213, 87, 87);
								//绘制昵称
								ctx.fillStyle = "#1E1E1E";
								ctx.font = "38px Arial";
								ctx.textAlign="start";
								if(this.$channel == 'zxyh') {
									ctx.fillText('中信银行的朋友', 230, 247);
								} else {
									ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 230, 247);
								}
								ctx.fillStyle = "#333333";
								ctx.font = "normal small-caps bold 35px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; 
								if(this.liveTheme.length>16){
                                   ctx.fillText(this.liveTheme.slice(0,16)+'...', 373, 423);
                                }else{
                                   ctx.fillText(this.liveTheme, 373, 423);
                                }

								ctx.fillStyle = "#321C3B";
								ctx.font = "25px Microsoft Yahei";
								ctx.textAlign = "center"; 
								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 4:
								ctx.drawImage(TXImg, 101, 213, 87, 87);
								ctx.fillStyle = "#1E1E1E";
								ctx.font = "38px Arial";
								ctx.textAlign="start";
								if(this.$channel == 'zxyh') {
									ctx.fillText('中信银行的朋友', 230, 247);
								} else {
									ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 230, 247); 
								}
								ctx.fillStyle = "#1E216B";
								ctx.font = "normal small-caps bold 35px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>17){
                                   ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 423);
                                }else{
                                   ctx.fillText(this.liveTheme, 373, 423);
                                }

								//时间
								ctx.fillStyle = "#6B268A";
								ctx.font = "25px Microsoft Yahei";
								ctx.textAlign = "center"; 
								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 5:
								ctx.drawImage(TXImg, 101, 205, 87, 87); 
								//昵称
								ctx.fillStyle = "#1E1E1E";
								ctx.font = "38px Arial";
								ctx.textAlign="start";
								if(this.$channel == 'zxyh') {
									ctx.fillText('中信银行的朋友',220, 237);
								} else {
									ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 220, 237);
								}
								//主题
								ctx.fillStyle = "#353535";
								ctx.font = "normal small-caps bold 35px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; 
								if(this.liveTheme.length>17){
                                   ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 423);
                                }else{
                                   ctx.fillText(this.liveTheme, 373, 423);
                                }

								//时间
								ctx.fillStyle = "#8B8B8B";
								ctx.font = "25px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 7:
								//头像
								ctx.drawImage(TXImg, 295, 236, 159, 157); 
								//二维码
								const ERImg = new Image();
								let imgBase64 = jrQrcode.getQrBase64(this.ERcode);
								ERImg.src = imgBase64; 
								ERImg.onload = () => {
									ctx.drawImage(ERImg, 156, 840, 184, 184); 
									//昵称
									ctx.fillStyle = "#353535";
									ctx.font = "46px Arial";
									ctx.textAlign="center";
									if(this.$channel == 'zxyh') {
										ctx.fillText('中信银行的朋友', 373, 451);
									} else {
										ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 373, 451);
									}

									//主题
									ctx.fillStyle = "#353535";
									ctx.font = "normal small-caps 900 35px Microsoft Yahei In-Bold Font";
									ctx.textAlign = "center";
									if(this.liveTheme.length>17){
                                       ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 610);
                                    }else{
                                       ctx.fillText(this.liveTheme, 373, 610);
                                    }
									//时间
									ctx.fillStyle = "#6a6a6a";
									ctx.font = "24px Microsoft Yahei";
									ctx.textAlign = "center";
									ctx.fillText(this.liveTime, 373, 695);
									let dataURL = c.toDataURL("image/png");
									this.dataUrl = dataURL
									this.$emit("msgParent", {
										type: "closeLoading",
										data: 'ruan'
									});
								}

								break;
							case 8:
								ctx.drawImage(TXImg, 315, 145, 116, 116);
								const ERImg1 = new Image();
								let imgBase641 = jrQrcode.getQrBase64(this.ERcode);
								ERImg1.src = imgBase641;
								ERImg1.onload = () => {
									ctx.drawImage(ERImg1, 285, 800, 190, 190);

									let SCImg1 = new Image();
									SCImg1.src = this.postImg;
									SCImg1.onload = () => {
										ctx.drawImage(SCImg1, 210, 406, 338, 191); 
										//昵称
										ctx.fillStyle = "#ffffff";
										ctx.font = "30px Arial"
										ctx.textAlign="center";
										if(this.$channel == 'zxyh') {
											ctx.fillText('中信银行的朋友', 373, 310); 
										} else {
											ctx.fillText(this.$store.state.userInfo.nickname||this.$store.state.userInfo.un, 373, 310); //昵称
										}
										//主题
										ctx.fillStyle = "#353535";
										ctx.font = "normal small-caps 900 26px Microsoft Yahei In-Bold Font";
										ctx.textAlign = "center";
										if(this.liveTheme.length>17){
                                           ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 648);
                                        }else{
                                           ctx.fillText(this.liveTheme, 373, 648);
                                        }

										//时间
										ctx.fillStyle = "#6a6a6a";
										ctx.font = "24px Microsoft Yahei";
										ctx.textAlign = "center";
										ctx.fillText(this.liveTime, 373, 695);
										let dataURL = c.toDataURL("image/png");
										this.dataUrl = dataURL
										this.$emit("msgParent", {
											type: "closeLoading",
											data: 'ruan'
										});
									}

								}
								break;
							default:
								break;
						}
						if(this.correct != 7 && this.correct != 8) {
							//绘制素材图片
							const SCImg = new Image();
							SCImg.src = this.postImg;
							SCImg.onload = () => {
								ctx.drawImage(SCImg, 137, 457, 476, 269); //起始   +大小														
								//绘制二维码
								const ERImg = new Image();
								let imgBase64 = jrQrcode.getQrBase64(this.ERcode);
								ERImg.src = imgBase64;
								ERImg.onload = () => {
									ctx.drawImage(ERImg, 130, 860, 256, 256);

									let dataURL = c.toDataURL("image/png");
									this.dataUrl = dataURL
									this.$emit("msgParent", {
										type: "closeLoading",
										data: 'ruan'
									});

								}

							}
						}

					}

				}
			}
		}
	}
</script>

<style scoped="scoped">
	.canvas-box {
		width: 750px;
		height: 1334px;
		margin: 0 auto;
		background: white;
		display: none;
	}
	
	.dataUrl {
		width: 750px;
		height: 1334px;
		position: relative;
		z-index: 1;
	}
</style>